<template>
  <view class="special-add">
    <view class="add-img">
      <image src="@/static/icon/specialcolumnPage/none.png" mode=""></image>
      <view class="info-title">涉及发布有关时政，色情，暴力，荐股，变相赌博等
        违法内容的，红料星球将立即永久封停账号和专栏。</view>
    </view>
    <view class="add-btn">
      <view class="btn-radio">
        <u-checkbox-group>
          <u-checkbox @change="onChangeAgree" v-model="radio" shape="circle"></u-checkbox>
        </u-checkbox-group>
        <view class="radio-agreement">我已阅读并同意
          <view>《红料星球规则》</view>
        </view>
      </view>
      <u-button text="继续创建" color="#2F7EFC" style="height: 94rpx;" @click="onComplete"></u-button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        radio: false
      }
    },
    methods: {
      onChangeAgree(val) {
        this.radio = val
      },
      onComplete() {
        if (!this.radio) {
          uni.showToast({
            title: '请阅读并同意《红料星球规则》',
            icon: 'none'
          })
        } else {
          uni.redirectTo({
            url: '/pages/specialColumnPage/special-add'
          })
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  /deep/ .u-button__text {
    font-size: 36rpx !important;
  }

  .special-add {
    background-color: #fff;
    display: flex;
    height: 100%;
    box-sizing: border-box;
    padding: 0 54rpx;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .add-img {
      display: flex;
      flex-direction: column;
      align-items: center;

      image {
        height: 288rpx;
        width: 477rpx;
      }
    }

    .add-btn {
      width: 100%;
      box-sizing: border-box;
      padding: 0 8rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 345rpx;


      .btn-radio {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-bottom: 34rpx;

        .radio-agreement {
          display: flex;
          font-size: 28rpx;
          font-weight: 500;
          color: #313131;

          :first-child {
            color: #FF5353;
          }
        }
      }
    }
  }
</style>